<template>
    <div class="home">
        <el-container>
            <el-header>
                <Header />
            </el-header>
            <el-container>
                <el-aside>
                    <Aside />
                </el-aside>
                <el-main>
                    <BreadcrumbVue />
                    <router-view />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import Header from "./components/Header.vue"
import Aside from "./components/Aside.vue"
import BreadcrumbVue from "@/components/breadcrumb .vue";
</script>

<style scoped lang="less">
.home {
    height: 100%;

    :deep(.el-header) {
        height: 70px;
        background-color: #409eff;
    }

    :deep(.el-aside) {
        width: var(--el-aside-width);
        background-color: rgb(48, 65, 86);
    }

    :deep(.el-main),
    :deep(.el-aside) {
        height: calc(100vh - 70px);

        &::-webkit-scrollbar {
            width: 0;
        }

    }
}
</style>